import { DrawerForm, ProFormDigit, ProFormSelect, ProFormSwitch, ProFormText, ProFormTreeSelect } from '@ant-design/pro-components';
import ProForm, {
  ModalForm,
  ProFormGroup,
  ProFormInstance,
  ProFormTextArea,
} from '@ant-design/pro-form';
import React, { useRef } from 'react';
import * as c from '@/services/consts';
import { Col, Row } from 'antd';
import { useModel } from 'umi';
import * as api from '@/services/vpnServer';


type FormProps = {
  visible: boolean;
  selectIds: string[];
  onCancel: () => void;
  onSubmit: (record: API.VpnServerBatchChange) => void;
};

const Form: React.FC<FormProps> = (props) => {
  const { visible, selectIds, onCancel, onSubmit } = props;
  if (!visible) {
    return <></>;
  }

  // const actionRef = useRef<ActionType>();
  const formRef = useRef<ProFormInstance>();
  
  const { supplierOptions,getProductVpnGroupTrees,getDeployConfigOptions } = useModel('useGlobalModel', (model) => ({
    supplierOptions: model.supplierOptions,
    getProductVpnGroupTrees: model.getProductVpnGroupTrees,
    getDeployConfigOptions: model.getDeployConfigOptions,
  }));
  
  const loadGroupTreeData = async (params: { [key: string]: any }) => {
    const treeData = getProductVpnGroupTrees(params.productId);
    return Promise.resolve(treeData);
  };

  const handleFormSubmit = async (record: API.VpnServerBatchChange) => {
    let status = formRef.current?.getFieldValue('status');
    let auth = formRef.current?.getFieldValue('auth');
    let enableUdp = formRef.current?.getFieldValue('enableUdp');

    
    record.serverIds = selectIds;
    record.status = status === '0' ? false : status == '1' ? true : undefined;
    record.auth = auth === '0' ? false : auth == '1' ? true : undefined;
    record.enableUdp = enableUdp === '0' ? false : enableUdp == '1' ? true : undefined;
//  console.log(record);
//  return;

    let result: API.Result;
    result = await api.batchChange(record);
    if (result && result.success === true) {
      onSubmit(record);
    }

  };

  
  const getSshUserOptions = () => {
    let options = getDeployConfigOptions(3);
    return options.map((element) => {
      return {label:element.label, value: element.value};
    });
  }

  return (
    <DrawerForm<API.VpnServerBatchChange>
      width={900}
      open={visible}
      title="批量修改服务器信息"
      onFinish={handleFormSubmit}
      formRef={formRef}
      drawerProps={{
        // forceRender: true,
        // destroyOnClose: true,
        // closable: false,
        onClose: onCancel,
        maskClosable: false,
      }}
    >
    <Row gutter={24}>
      <Col span={24}>
          <ProFormTreeSelect
            name="groupIds"
            label="分组 [新分组将替换原分组]"
            placeholder="请选择分组"
            request={loadGroupTreeData}
            allowClear={true}
            fieldProps={{
              showArrow: true,
              showSearch: false,
              treeCheckable: true,
              multiple: true,
              treeDefaultExpandAll: true,
              listHeight: 600,
            }}
          />
      </Col>
    </Row>
    <Row gutter={24}>
      <Col span={8}>
        <ProFormSelect
          name="status"
          label="状态"
          allowClear={true}
          options={[
            {label:'禁用', value :'0'},
            {label:'启用', value :'1'}
          ]}
        />
      </Col>
      <Col span={8}>
        <ProFormSelect
          name="serverType"
          label="服务器类型"
          allowClear={true}
          options={c.ServerTypes}
        />
      </Col>
      <Col span={8}>
        <ProFormSelect
          name="supplierId"
          label="服务器供应商"
          placeholder="请选择服务器供应商"
          allowClear={true}
          options={supplierOptions}
          fieldProps={{
            showArrow: true,
            showSearch: true,
          }}
        />
      </Col>
    </Row>

    <Row gutter={24}>
      <Col span={8}>
        <ProFormText 
          name="idcServerRegion" 
          label="服务器区域" 
        />
      </Col>
      <Col span={8}>
        <ProFormDigit
          name="maxBandwidth"
          label="总调度带宽"
          min={0}
          max={102400}
          placeholder="服务器最大带宽"
          addonAfter={<span className="ant-form-item-extra">Mb</span>}
        />
      </Col>
      <Col span={8}>
        <ProFormDigit
          name="maxIpBandwidth"
          label="单IP最大带宽"
          min={0}
          max={102400}
          placeholder="用户最大带宽"
          addonAfter={<span className="ant-form-item-extra">Mb</span>}
        />
      </Col>
    </Row>
    
    <Row gutter={24}>
      <Col span={4}>
          <ProFormDigit
            name="port"
            label="服务端口"
            min={1}
            max={65535}
          />
      </Col>
      <Col span={4}>
          <ProFormDigit
            name="pingPort"
            label="测速端口"
            min={0}
            max={65535}
          />
      </Col>
      <Col span={8}>
        <ProFormDigit
          name="bandwidth"
          label="带宽"
          min={1}
          max={102400}
          placeholder="服务器带宽"
          addonAfter={<span className="ant-form-item-extra">Mb</span>}
        />
      </Col>
    </Row>
    
    <Row gutter={24}>
      <Col span={4}>
        <ProFormSelect
          name='sshUser'
          label="SSH用户"
          options={getSshUserOptions()}
        />
      </Col>
        <Col span={4}>
          <ProFormSelect
            name='sshKeyId'
            label="SSH Key"
            options={getDeployConfigOptions(2)}
          />
        </Col>
      <Col span={4}>
        <ProFormSelect
          name='workMode'
          label="传输协议"
          options={[{label:'老协议', value:0},{label:'新协议', value:1}]}
        />
      </Col>
      <Col span={4}>
        <ProFormSelect
          name='enableUdp'
          label="使用UDP"
          options={[{label:'不使用', value:0},{label:'使用', value:1}]}
        />
      </Col>
      <Col span={4}>
        <ProFormSelect
          name='auth'
          label="开启授权"
          options={[{label:'不开启', value:0},{label:'开启', value:1}]}
        />
      </Col>
    </Row>
    
    <Row gutter={24}>
      <Col span={24}>
          <ProFormTextArea name="remark" label="备注" width={800} />
      </Col>
    </Row>

    </DrawerForm>
  );
};

export default Form;
